<template>
  <div>

    <a-form style="max-width: 500px; margin: 40px auto 0;" :form="form" @keyup.enter.native="nextStep">
      <a-form-item
        :label="$t('m.system.user.entity.username')"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input
          v-decorator="['username',validatorRules.username]"
          type="text"
          autocomplete="false"
          :placeholder="$t('m.system.login.entity.username_phone')">
          <ych-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-item>
      <a-form-item>
        <router-link style="line-height: 40px;" :to="{ name: 'login' }">{{$t('m.system.login.other.login_use_existing_account')}}</router-link>
        <a-button type="primary" @click="nextStep" style="float: right;">{{ $t('m.codegen.button.next_step') }}</a-button>
      </a-form-item>
    </a-form>

    <Verify
      @success="ok"
      captchaType="blockPuzzle"
      ref="verify"
    ></Verify>
  </div>
</template>

<script>

  import { getAction } from '@/api/manage'
  import { checkOnlyUser } from '@/api/api'
  import Verify from '../../../components/verifition/Verify'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'Step1',
    components: {
      Verify
    },
    data () {
      return {
        form: this.$form.createForm(this),
        validatorRules: {
          username: { rules: [{ required: true, message:this.$t('m.system.login.verify.username_phone')}, { validator: this.validateInputUsername }] },
        },
      }
    },
    methods: {
      ok () {
        const that = this
        this.form.validateFields((err, values) => {
          if (!err) {
            let isPhone = false
            const params = {}
            const reg = /^[1-9]\d*$|^0$/
            const username = values.username
            if (reg.test(username) == true) {
              params.phone = username
              isPhone = true
            } else {
              params.username = username
            }
            getAction(YchConstant.PREFIX_SYSTEM + '/user/querySysUser', params).then((res) => {
              if (res.success) {
                const userList = {
                  username: res.result.username,
                  phone: res.result.phone,
                  isPhone: isPhone
                }
                setTimeout(function () {
                  that.$emit('nextStep', userList)
                })
              }
            })
          }
        })
      },
      nextStep () {
        this.form.validateFields((err) => {
          if (!err) {
            this.$refs.verify.show()
          }
        })
      },
      validateInputUsername (rule, value, callback) {
        const reg = /^[0-9]+.?[0-9]*/
        if (!value) {
          callback()
        }

        //判断用户输入账号还是手机号
        if (reg.test(value)) {
          checkOnlyUser({
            phone: value,
          }).then((res) => {
            if (res.success) {
              callback(this.$t('m.system.login.verify.username_notexist'))
            } else {
              callback()
            }
          })
        } else {
          checkOnlyUser({
            username: value,
          }).then((res) => {
            if (res.success) {
              callback(this.$t('m.system.login.verify.username_notexist'))
            } else {
              callback()
            }
          })
        }
      },
    }
  }
</script>
